<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
     <title>
      		  个人中心
	</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/font-awesome.min.css"  />
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.min.css"  />
</head>
<script src="${pageContext.request.contextPath}/js/jquery-1.6.3.js"></script>
 <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
 <script src="${pageContext.request.contextPath}/css/unslider.min.js"></script>
<script src="${pageContext.request.contextPath}/js/userCenterOrder.js"></script>
<body style="width:1366px">
	<div style="background: #F5F5F5;height:40px;padding-top: 8px" id="topdiv">
		<div style="margin-left:100px;">
			您好!<span style="color:#CD4F39">
			${user.name}
			</span>
		</div>
		<div style="margin-left:750px;">
			<a href="${pageContext.request.contextPath}">商城首页 <span class="fa fa-home" style="color:#FF7F00">
			</span>
			</a>
		</div>
		<div style="margin-left:50px;">
			<a href="${pageContext.request.contextPath}/user/center.action">个人中心
			 <span class="fa fa-cog"
				style="color:#FF7F00"></span>
			</a>
		</div>
		<div style="margin-left:50px;">
			<a href="${pageContext.request.contextPath}/user/outLogin.action">退出登录<span class="fa fa-user-circle-o"
				style="color:#FF7F00"></span>
			</a>
		</div>
	</div>
	<div id="toplogo" style="border-bottom:2px solid #FF3030;height:102px;">
		<div style="margin-left: 200px;float: left">
			<a href="${pageContext.request.contextPath}">
			<img src="${pageContext.request.contextPath}/img/juninglogo.jpg"
				width="100px" height="100px" />
			</a>
		</div>
		<div style="float: left;margin-left:500px; ">
			<img src="${pageContext.request.contextPath}/img/userCenter.png" >
		</div>
	</div>
	<div>
			<div class="mainLeft" style="float: left;">
				<ul style="list-style: none;">
					<li>
					<a  href="${pageContext.request.contextPath}/CartController/listCartByUser.action">我的购物车</a>
					</li>
					
					<li  >
					<a  href="${pageContext.request.contextPath}/OrderController/allOrderByUserId.action">
					我的订单
					</a>
					</li>
					<li>
					<a  href="${pageContext.request.contextPath}/AddressController/listAddress.action" style="color:#FF6347;font-size:16px">我的地址</a>
					</li>
					<li>
					<a  href="${pageContext.request.contextPath}/user/center.action">
					账户设置</a>
					</li>
				</ul>
			</div>
			</div>
			<div  style="float: left;border:1px solid #DBDBDB;margin: 40px 0 0 100px;min-height: 500px;width: 950px">
				<c:if test="${addresslist!=null }">
					<c:forEach items="${addresslist }" var="address" varStatus="s">
						<div class="address">
					<div id="exhibition${address.id }" class="exhibition" style="position: relative;">
						<label style="font-size:12px;display: block;position: absolute;left:5px;top:5px;color:#999">
						地址${s.index+1 }</label>
						<div style="margin:40px 0 0 10px ;width: 100px">
							<span>
							姓名
							</span>
							<br>
							<span style="color:#A0522D">
							${address.name}
							</span>
						</div>
						<div style="margin:40px 0 0 20px ;width: 300px">
							<span>详细地址</span>
							<br>
							<span style="color:#A0522D">
							${address.address}
							</span>
						</div>
						<div style="margin:40px 0 0 20px ;width: 130px">
							<span>
								联系电话
							</span>
							<br>
							<span style="color:#A0522D">
								${address.phonenum}
							</span>
						</div>
						<c:choose >
						<c:when test="${address.defaults==1}">
						<div style="color:#fff;width:43px;height:28px;border:2px solid #A3A3A3;
						background:#BFBFBF;border-radius: 3px;text-align: center;font-size:16px;
						margin: 50px 0 0 30px;">
						默认
						<input type="hidden" value="${address.id}" id="defauid">
						</div>
						</c:when>
						<c:otherwise>
						<div style="color:#fff;width:43px;height:28px;
						margin: 50px 0 0 30px;">
						</div>
						</c:otherwise>
						</c:choose>
						<div style="width: 100px;margin:40px 0 0 70px;">
							<button style="border:2px solid #A3A3A3;height: 35px;border-radius: 5px;back" 
							onclick="return updateOff(${address.id})">
							修改地址</button>
							<button onclick="return defaults(${address.id})" style="margin-top:10px;border:2px solid #A3A3A3;height: 35px;border-radius: 5px;">
							设为默认</button>
						</div>
					</div>
					<div id="update${address.id }" class="update" style="display:none">
						<form id="updateform${address.id }">
						<input type="hidden" value="${address.id }" name="id">
						<div style="margin:20px 0 0 10px ;width: 100px">
							<span>
							姓名
							</span>
							<br>
							<input type="text" value="${address.name}" name="name" style="width:150px">
						</div>
						<div style="margin:20px 0 0 60px ;width: 300px">
							<span>详细地址</span>
							<br>
							<input type="text" value="${address.address}" name="address" style="width:300px">
						</div>
						<div style="margin:20px 0 0 20px ;width: 130px">
							<span>
								联系电话
							</span>
							<br>
							<input type="text" value="${address.phonenum}" name="phonenum" id="updateinput${address.id}">
						</div>
						<div style="width: 100px;margin:20px 0 0 100px;">
							<button onclick="return update(${address.id})" style="border:2px solid #EE6A50;height: 35px;border-radius: 5px;">
							确认修改</button>
							<button onclick="return updateOff(${address.id})" style="margin-top:10px;border:2px solid #EE6A50;height: 35px;border-radius: 5px;back">
							取消修改</button>
							<input type="hidden" value="${address.id}">
						</div>
						</form>
					</div>
				</div>
					</c:forEach>
				</c:if>
				<c:if test="${addresslist==null}">
						<div class="address">
						<div id="addaddress" class="update">
						<form method="post" id="addaddressform" action="${pageContext.request.contextPath}/AddressController/saveAddress.action">
						<input type="hidden" value="" name="id">
						<div style="margin:20px 0 0 10px ;width: 100px">
							<span>
							姓名
							</span>
							<br>
							<input type="text" value="" name="name" style="width:150px">
						</div>
						<div style="margin:20px 0 0 60px ;width: 300px">
							<span>详细地址</span>
							<br>
							<input type="text" value="" name="address" style="width:300px">
						</div>
						<div style="margin:20px 0 0 20px ;width: 130px">
							<span>
								联系电话
							</span>
							<br>
							<input type="text" value="" name="phonenum" id="addphone2">
						</div>
						<div style="width: 100px;margin:20px 0 0 100px;">
							<input onclick="return phonenumtest(2)" type="submit" value="添加" style="border:2px solid #EE6A50;height: 35px;border-radius: 5px;">
						</div>
						</form>
					</div>
					</div>
				</c:if>
					<div class="address" id="addAddress" style="display:none ">
					<div id="addaddress" class="update">
						<form method="post" id="addaddressform" action="${pageContext.request.contextPath}/AddressController/saveAddress.action">
						<input type="hidden" value="" name="id">
						<div style="margin:20px 0 0 10px ;width: 100px">
							<span>
							姓名
							</span>
							<br>
							<input type="text" value="" name="name" style="width:150px">
						</div>
						<div style="margin:20px 0 0 60px ;width: 300px">
							<span>详细地址</span>
							<br>
							<input type="text" value="" name="address" style="width:300px">
						</div>
						<div style="margin:20px 0 0 20px ;width: 130px">
							<span>
								联系电话
							</span>
							<br>
							<input type="text" value="" name="phonenum" id="addphone1">
						</div>
						<div style="width: 100px;margin:20px 0 0 100px;">
							<input onclick="return phonenumtest(1)" type="submit" value="确认添加" style="border:2px solid #EE6A50;height: 35px;border-radius: 5px;font-size:14px;">
							<button onclick="return addOff()" style="border:2px solid #EE6A50;height: 35px;border-radius: 5px;margin-top:10px">
							取消添加</button>
						</div>
						</form>
					</div>
					</div>
					<c:if test="${addresslist!=null}">
						<button onclick="return addOff()" style="height:40px;width:150px;border-radius: 6px;
						border:2px solid #CDC9C9;margin:40px 0 0 100px;">
						+添加新的地址</button>
					</c:if>
			</div>
				<input type="hidden" value="${pageContext.request.contextPath}/" id="path">
				<input type="hidden" value="${error}" id="error">
	</body>
	<script type="text/javascript">
	$(document).ready(function(e){
			var error=$("#error").val();
			if(!(error==null||error=='')){
					alert("添加地址失败,请认真填写.");
			}
	});
		function updateOff(id){
			if($("#update"+id).css('display')=='none'){
				$("#exhibition"+id).css('display','none');
				$("#update"+id).css('display','block');
			}else{
				$("#exhibition"+id).css('display','block');
				$("#update"+id).css('display','none');
			}
			return false;
		}
		function update(id){
			var t=/[0-9]{11}/;
			var phonenum=$("#updateinput"+id).val();
			if(!(t.test(phonenum))){
				alert("请输入正确的电话号码!");
				return false;
			}
			var path=$("#path").val();
			var val=$("#updateform"+id).serialize();
				$.post(path+"AddressController/update.action",val,function(e){
						if(e!=0){
						location.reload();
						}else{
						alert("抱歉!修改失败,请刷新后再试.");
						}
				});		
					return false;
		}
		function defaults(id){
			var did=$("#defauid").val();
			$("#updateform"+id).append("<input name='defaults' type='hidden' value='1'>");
			$("#updateform"+id).append("<input name='did' type='hidden' value='"+did+"'>");
			update(id);
			return false;
		}
		function addOff(){
		var div=$("#addAddress");
				if(div.css('display')=='none'){
					div.css("display","block");
				}else{
					div.css("display","none");
				}
				return false;
		}
		function phonenumtest(id){
				var t=/[0-9]{11}/;
			var phonenum=$("#addphone"+id).val();
			if(!(t.test(phonenum))){
				alert("请输入正确的电话号码!");
				return false;
			}
		}
	</script>
	<style type="text/css">
	.update input{
	height:40px;border:2px solid #EE6A50;border-radius: 4px;
	font-size: 16px;
	}
	.exhibition span{
	font-size:17px;
	}
	.exhibition div{
	float:left;
	}
	.update div{
	float:left;
	}
	.address{
		height:150px;width: 850px;border:1px solid #9E9E9E;margin:20px 0 0 50px;
	}
	a{
	color:#191970;font-weight:600
	}
	a:hover{
	color:#4F4F4F;text-decoration:none;cursor: pointer; 
	}
	.mainLeft ul{
		margin:50px 0 0 70px;
		}
	.mainLeft li{
			margin:20px 0 0 0;width: 100px;height: 40px;text-align: center;
			}
	.mainLeft li a{
			color:#262626;
	}
	.mainLeft li a:hover{
			color:#FF6347;text-decoration:none;font-size: 16px; 
			}
	.mainLeft li:hover{
			cursor: pointer;
			}
	#topdiv div{
	float:left;
	}
	</style>
	</html>